<style> 
        /* Tab容器样式 */
        .tab-container {
            width: 100%;
            max-width: 8000px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        /* Tab导航样式 */
        .tab-nav {
            display: flex;
            list-style: none;
            background: #f0f0f0;
            border-bottom: 1px solid #ddd;
        }
        
        .tab-nav li {
            flex: 1;
            text-align: center;
        }
        
        .tab-nav label {
            display: block;
            padding: 15px 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            color: #555;
        }
        
        .tab-nav label:hover {
            background: #e0e0e0;
        }
        
        /* 隐藏radio按钮 */
        .tab-radio {
            display: none;
        }
        
        /* 内容容器 */
        .tab-content-container {
		     padding: 20px; 
             min-height: 500px; /* 设置最小高度 */
			 height: auto;     /* 保持自适应 */
        }
        
        /* Tab内容样式 */
        .tab-content {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        /* 激活的Tab样式 */
        .tab-radio:checked + label {
            background: white;
            color: #2c3e50;
            border-bottom: 3px solid #3498db;
        }
        
        /* 激活的Tab用特出颜色显示 */
        #tab1:checked ~ .tab-nav li:nth-child(1) label,
        #tab2:checked ~ .tab-nav li:nth-child(2) label,
        #tab3:checked ~ .tab-nav li:nth-child(3) label,
        #tab4:checked ~ .tab-nav li:nth-child(4) label,
        #tab5:checked ~ .tab-nav li:nth-child(5) label,
        #tab6:checked ~ .tab-nav li:nth-child(6) label{
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4);
        }
        
        /* 显示选中的内容 */
        #tab1:checked ~ .tab-content-container #content1,
        #tab2:checked ~ .tab-content-container #content2,
        #tab3:checked ~ .tab-content-container #content3,
        #tab4:checked ~ .tab-content-container #content4,
        #tab5:checked ~ .tab-content-container #content5,
        #tab6:checked ~ .tab-content-container #content6 {
            display: block;
        }
        
        /* 内容淡入动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 响应式调整 */
        @media (max-width: 600px) {
            .tab-nav {
                flex-direction: column;
            }
            
            .tab-nav li {
                border-bottom: 1px solid #ddd;
            }
            
            .tab-radio:checked + label {
                border-bottom: none;
                border-left: 3px solid #3498db;
            }
        }
        
        .upload-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }		

        /* 隐藏默认的文件输入框 */
        .file-input-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }
        .file-input-wrapper input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .custom-upload-btn {
            display: inline-block;
            padding: 6px 12px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .image-preview {
            max-width: 100px;
            max-height: 100px;
            border: 1px solid #ccc;
            display: none; /* 初始隐藏，上传图片后显示 */
        }
        
    </style>

    <div class="tab-container">
        <input type="radio" name="tabs" id="tab1" class="tab-radio" checked>
        <input type="radio" name="tabs" id="tab2" class="tab-radio">
        <input type="radio" name="tabs" id="tab3" class="tab-radio">
        <input type="radio" name="tabs" id="tab4" class="tab-radio">
        <input type="radio" name="tabs" id="tab5" class="tab-radio">
        <input type="radio" name="tabs" id="tab6" class="tab-radio">
        
        <ul class="tab-nav">
            <li>
                <label for="tab1" id="tabP1">基础数据-Base Info</label>
                <!-- 公司名称（中、英、本地语 文），logo，刷新 -->
            </li>
            <li>
                <label for="tab2" id="tabP2">联系信息-Contact</label>
                <!-- 联系人姓名，电话，公司地址，电子邮件，发送邮件 -->
            </li>
            <li>
                <label for="tab3"id="tabP3">公司介绍-About</label>
                <!-- 中文、英文、本地语 的介绍，关键词 -->
            </li>
            <li>
                <label for="tab4" id="tabP4">经营类别-Products</label>
                <!-- 行业类别、产品类型、产品服务介绍 -->
            </li>
            <li>
                <label for="tab5" id="tabP5">站点设置-Web Setup</label>
                <!-- 域名、空间大小、站点类型(1静态，2动态), 站点页面管理链接 -->
            </li>
            <li>
                <label for="tab6" id="tabP6">认证推广- Cer & Pmo</label>
                <!-- 推广起止日期，续费提示（直接线上字符 或 本地代理商） -->
            </li>
        </ul>
        
        <div class="tab-content-container">
            <div id="content1" class="tab-content"></div>
            
            <div id="content2" class="tab-content"></div>
            
            <div id="content3" class="tab-content">
                <h2>关于我们</h2>
                <p>中文、英文、本地语 的介绍，关键词 </p> 
            </div>
            
            <div id="content4" class="tab-content">
                <h2>行业产品</h2>
                <p>行业类别、产品类型、产品服务介绍</p>
                <address>
                    电子邮件: info@example.com<br>
                    电话: 123-456-7890
                </address>
            </div>
            
            <div id="content5" class="tab-content">
                <h2>Web设置</h2>
                <p>域名、空间大小、站点类型(1静态，2动态), 站点页面管理链接</p>
                <address>
                    电子邮件: info@example.com<br>
                    电话: 123-456-7890
                </address>
            </div>
            <div id="content6" class="tab-content">
                <h2>认证与推广</h2>
                <p>推广起止日期，续费提示（直接线上字符 或 本地代理商）</p>
                <address>
                    电子邮件: info@example.com<br>
                    电话: 123-456-7890
                </address>
            </div>
            
        </div>
    </div>



<script id="model-content1" type="text/html">
	<table class="no-hover" border=1 width="80%" align="left" >
	<tr>
	    <td colspan="2" align="center"><b><label id="titleP1"></label></b></td>
	</tr> 
	<tr>
	    <td width="25%" style="text-align: right;">{{if lang=='cn'}}地区及语言{{else}}Regin & language{{/if}}:</td>
	    <td width="75%"><input type="text"  style="height:26px" name="lcode" value="" size="36"></td>
	</tr>
	<tr>
	    <td width="25%" style="text-align: right;">{{if lang=='cn'}}公司中文名{{else}}Company Chinese Name {{/if}}:</td>
	    <td width="75%"><input type="text" style="height:26px" name="cname" value="" size="36"></td>
	</tr>
	<tr>
	    <td width="25%" style="text-align: right;">{{if lang=='cn'}}公司英文名{{else}}Company English Name{{/if}}:</td>
	    <td width="75%"><input type="text" style="height:26px" name="ename" value="" size="64"></td>
	</tr> 
	<tr>
	    <td width="25%" style="text-align: right;">{{if lang=='cn'}}公司本地名{{else}}Company Local Name{{/if}}:</td>
	    <td width="75%"><input type="text" style="height:26px" name="ename" value="" size="64"></td>
	</tr> 
	<tr>
	    <td width="25%" style="text-align: right;">{{if lang=='cn'}}公司图标(Logo){{else}}Company Logo Image{{/if}}:</td>
	    <td width="75%">
	    	<div class="upload-container">
	            <!-- 自定义文件上传按钮 -->
	            <div class="file-input-wrapper">
	                <button class="custom-upload-btn">{{if lang=='cn'}}选择文件{{else}}image logo file{{/if}}</button>
	                <input type="file" id="file-upload" accept="image/*" onChange="showImage(this)">
	            </div>  
	            <img id="image-preview" class="image-preview" src="#" alt="{{if lang=='cn'}}图片预览{{else}}Preview{{/if}}">
	        </div>
		</td>
	</tr>
	<tr>
	    <td colspan="2" align="center">&nbsp;</td>
	</tr> 
	<tr>
	    <td colspan="2" align="center">
	      <button class="modal-btn cancel-btn" onclick="closeModal()">{{if lang=='cn'}}取消{{else}}Cnacel{{/if}}</button>
	      <button class="modal-btn save-btn" onclick="saveItem()">{{if lang=='cn'}}保存{{else}}Save{{/if}}</button>
	    </td> 
	</tr> 
	</table>  
</script>

<script id="model-content2" type="text/html"> 
	<table class="no-hover" border=1 width="80%" align="left" >
	<tr>
	    <td colspan="2" align="center"><b><label id="titleP2"></label></b></td>
	</tr> 
	<tr>
	    <td width="25%" style="text-align: right;">{{if lang=='cn'}}联系人姓名{{else}}Contact name{{/if}}:</td>
	    <td width="75%"><input type="text"  style="height:26px" name="linkerName" value="" size="36"></td>
	</tr>
	<tr>
	    <td width="25%" style="text-align: right;">{{if lang=='cn'}}联系电话{{else}}Pjhone number{{/if}}:</td>
	    <td width="75%"><input type="text" style="height:26px" name="phone" value="" size="36"></td>
	</tr>
	<tr>
	    <td width="25%" style="text-align: right;">{{if lang=='cn'}}公司地址(中文){{else}}Company address(Chinese){{/if}}:</td>
	    <td width="75%"><input type="text" style="height:26px" name="cnAddress" value="" size="64"></td>
	</tr> 
	<tr>
	    <td width="25%" style="text-align: right;">{{if lang=='cn'}}公司地址(英文){{else}}Company address(English){{/if}}:</td>
	    <td width="75%"><input type="text" style="height:26px" name="enAddress" value="" size="64"></td>
	</tr> 
	<tr>
	    <td width="25%" style="text-align: right;">{{if lang=='cn'}}公司地址(本地){{else}}Company address(Local){{/if}}:</td>
	    <td width="75%"><input type="text" style="height:26px" name="localAddress" value="" size="64"></td>
	</tr> 
    <tr>
	    <td width="25%" style="text-align: right;">{{if lang=='cn'}}电子邮件{{else}}Contact Email{{/if}}:</td>
	    <td width="75%"><input type="text" style="height:26px" name="email" value="" size="64"></td>
	</tr> 
	<tr>
	    <td colspan="2" align="center">&nbsp;</td>
	</tr> 
	<tr>
	    <td colspan="2" align="center">
	      <button class="modal-btn cancel-btn" onclick="closeModal()">{{if lang=='cn'}}取消{{else}}Cnacel{{/if}}</button>
	      <button class="modal-btn save-btn" onclick="saveItem()">{{if lang=='cn'}}保存{{else}}Save{{/if}}</button>
	    </td> 
	</tr> 
	</table>  
</script>

<script> 
 /*
 localStorage.removeItem(key)
 localStorage.setItem("lang",value);
 value = localStorage.getItem(key);
 */ 
  
 function showEditPanel(contentId){
	 console.log("showPabel:"+contentId);
	 var lang = localStorage.getItem("lang");
	 if(lang==null){
		 lang="cn";
	 } 
	 
	 var js = {"lang":lang}; 
	// js["lang"] = lang;
	 
	 var modelId = "model-"+contentId; 
	 var html = template(modelId, js);    
     console.log(html);
 	 document.getElementById(contentId).innerHTML = html;  
 	 
 	 setContentTitle(contentId); 
 }  
  
 
 function observeTabs(){
	 debugger;
	 const tabs = ["content1","content2","content3","content3","content4","content5","content6"];  
	//创建观察器
	const observer = new IntersectionObserver((entries) => {
		entries.forEach(entry => {
			var divId = entry.target.id; // 获取 div 的 id
		    if (entry.isIntersecting) {  
		        //setContentTitle(divId);
		    	showEditPanel(divId);
		    } else {
		       console.log('Div 离开视口！',divId); 
		    }
		});
		}, {
		threshold: 0.1, // 当至少 10% 的元素可见时触发
		rootMargin: '0px' // 可以调整视口的检测边界
		}
	); 
	for(var i=0;i<tabs.length;i++){
		var div = document.getElementById(tabs[i]);
		if(div != null){
			observer.observe(div);
		} 
	} 
 } 
 
 function setContentTitle(vId){
	 const list = [["content1","tabP1","titleP1"],["content2","tabP2","titleP2"],["content3","tabP3","titleP3"],
		 ["content4","tabP4","titleP4"],["content5","tabP5","titleP5"],["content6","tabP6","titleP6"] ];
	 for(var i=0;i<list.length;i++){
		 if(vId == list[i][0]){
			 var f = document.getElementById(list[i][1]);
			 var t = document.getElementById(list[i][2]);
			 if(t != null){
				 t.innerHTML = f.innerHTML;
			 }
		 }
	 }
 }
 
 function showImage(t){
	  const file = t.files[0];
      if (file) {
          const reader = new FileReader();
          reader.onload = function(event) {
              const preview = document.getElementById('image-preview');
              preview.src = event.target.result;
              preview.style.display = 'block';
          }
          reader.readAsDataURL(file);
      } 
}
 
 observeTabs();
 
 </script>